<template>
    <div>
        充值记录
        <div v-if="data.length>0">
            <el-table :data="data" class="marginTop30" height="600px" size="small" style="width: 100%" v-loadmore="loadMoreData">
                <el-table-column label="充值金额">
                    <template slot-scope="scope">{{Math.abs(scope.row.money)}}</template>
                </el-table-column>
                <el-table-column :label="'到账'+$store.state.config.coin_name" prop="balance"></el-table-column>
                <el-table-column label="充值方式" prop="payment">
                    <template slot-scope="scope">
                        <div class="flex align-center" v-if="scope.row.payment=='wechat'">
                            <img alt src="@/assets/wallet/wx.png" srcset width="20px" />
                            微信支付
                        </div>
                        <div class="flex align-center" v-else-if="scope.row.payment=='alipay'">
                            <img alt src="@/assets/wallet/zfb.png" srcset width="20px" />
                            支付宝支付
                        </div>
                        <div class="flex align-center" v-else-if="scope.row.payment=='ios'">
                            <img alt src="@/assets/wallet/ios.png" srcset width="20px" />
                            苹果支付
                        </div>
                        <div v-else>未知</div>
                    </template>
                </el-table-column>
                <el-table-column label="充值时间" prop="notes">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status!=1">{{scope.row.created_at}}</span>
                        <span v-else>{{scope.row.notify_at}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="充值状态" prop="money" sortable>
                    <template slot-scope="scope">
                        <div>
                            <span v-if="scope.row.status==0">待支付</span>
                            <span v-if="scope.row.status==1">支付成功</span>
                            <span v-if="scope.row.status==2">充值失败</span>
                            <span v-if="scope.row.status==3">取消订单</span>
                            <span v-if="scope.row.status==4">退款</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column :width="200" label="订单号" prop="time">
                    <template slot-scope="scope">
                        <div>
                            <span>{{ scope.row.trade_no | getShortOrder }}</span>
                            <i @click="copy(scope.row.trade_no)" class="iconfont icon-fuzhi color-blue cursor-pointer" style="font-size:22px"></i>
                        </div>
                    </template>
                </el-table-column>
            </el-table>

            <div class="text-center color-fff font-15 width-100% height-50 marginTop100" style="margin-top: 30%;">
                <el-image :src="require('@/assets/gif/global_loading.gif')" fit="cover" style="width: 40px;height:30px;" v-if="append_loading"></el-image>
            </div>

            <div class="text-center font-15 color-999 mt-10" v-if="data.length>=total">~没有更多了~</div>
        </div>
        <div v-else>
            <el-empty :image="empty_image"></el-empty>
        </div>

        <div class="text-center color-fff font-15 width-100% height-50 marginTop100" v-show="loading">
            <el-image :src="require('@/assets/gif/global_loading.gif')" class="fiexd-loading" fit="cover" style="width: 40px; height: 30ox"></el-image>
        </div>
    </div>
</template>

<script>
import pageTool from '@/mixins/page'
export default {
    mixins: [pageTool],
    mounted() {
        this.beforeInit()
    },
    data() {
        return {
            empty_image: require('@/assets/image/empty.png'),
        }
    },
    directives: {
        loadmore: {
            bind(el, binding) {
                const selectWrap = el.querySelector('.el-table__body-wrapper')
                selectWrap.addEventListener('scroll', function () {
                    const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
                    if (scrollDistance <= 0.5) {
                        binding.value() //执行在使用时绑定的函数，在这里即addData方法
                    }
                })
            },
        },
    },
    methods: {
        beforeInit() {
            this.url = '/recharge/index'
            this.append = true
            this.init() //重新请求数据
        },
        copy(text) {
            const inputElement = document.createElement('input')
            inputElement.value = text
            document.body.appendChild(inputElement)
            inputElement.select()
            document.execCommand('copy')
            document.body.removeChild(inputElement)
            this.$message.success('复制成功')
        },
        loadMoreData() {
            this.page++
            this.init()
        },
    },
}
</script>

<style></style>